<template>
  <div class="about">
    <at-button
      v-if="debug"
      @click="showData(chartData)"
    >
      <i class="icon icon-align-center" /> this page data
    </at-button>
    <div
      id="myChart231"
      :style="{width: '800px', height: '550px'}"
    ></div>
    <!-- <div>
      <span>检控量占比前三：</span>
      <at-tag
        color
        v-for="(item,index) in top3Ratio"
        :key="index"
      >{{item.name}}({{item.value}}%)</at-tag>
    </div>
    <br />
    <div>
      <span>检控量增幅前三：</span>
      <at-tag
        color
        v-for="(item,index) in top3Growth"
        :key="index"
      >{{item.name}}({{item.value}}%)</at-tag>
    </div> -->
    <input
      class="hdbtn"
      type="button"
      id="btn888"
      @click="downloadImpByChart()"
      value="保存为图片"
    />
  </div>
</template>
<style scoped>
.at-tag {
  margin-right: 1rem;
}
</style>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "hello",
  data() {
    return {
      title: "",
      top3Ratio: [],
      top3Growth: [],
      chartData: [],
      top3texts:["",""]
    };
  },
  computed: {
    ...mapState(["cookies", "debug"])
  },
  mounted() {
    this.updateCookies();
    this.title = this.cookies.chart23.title;
    this.top3Ratio = this.cookies.chart23.top3Ratio;
    this.top3Growth = this.cookies.chart23.top3Growth;
    
    this.chartData = this.cookies.chart23.data;
    this.top3Ratio.forEach((item) => {
      this.top3texts[0]+=item.name+"("+item.value+"%)   "
    });
    this.top3Growth.forEach((item) => {
      this.top3texts[1]+=item.name+"("+item.value+"%)   "
    });
    this.drawLine();
  },
  methods: {
    ...mapMutations(["updateCookies"]),
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart231 = this.$echarts.init(
        document.getElementById("myChart231")
      );

      var option = {
        title: {
          text: this.title,
          // subtext: "纯属虚构",
          x: "center",
          textStyle: {
            fontSize: '26',
            fontFamily: 'FZXBSJW'
          }
        },
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c} ({d}%)"
          formatter: "{a} <br/>{b} : {d}%"
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {
        //       type:'png'
        //     }
        //   }
        // },
        legend: {
          orient: "vertical",
          left: "right",
          top: '15%'
          // data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        },
        // color: [
        //   "#e58b3d",
        //   "#e59524",
        //   "#dc9e31",
        //   "#da9c2d",
        //   "#d2b130",
        //   "#bbd337",
        //   "#8cc13f",
        //   "#67b52d",
        //   "#53b440",
        //   "#48af54",
        //   "#479c7f",
        //   "#48a698",
        //   "#57868c"
        // ],
        color: ['#339999', '#222299', '#FFDD11', "#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "gray"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "65%",
            center: ["45%", "50%"],
            data: this.chartData,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b}   ({d}%)"
                },
                labelLine: { show: true }
              }
            }
          }
        ],
        graphic: [
          {
            type: 'group',
            left: 'center',
            bottom: 10,
            children: [
              {
                type: 'text',
                z: 100,
                left: 'center',
                top: 'middle',
                style: {
                  // fill: 'gray',
                  text: [
                    '检控量占比前三：'+this.top3texts[0],
                    '',
                    '检控量增幅前三：'+this.top3texts[1]
                  ].join('\n'),
                  font: '14px Microsoft YaHei'
                }
              }
            ]
          }
        ],
      };

      // 绘制图表
      myChart231.setOption(option);
    },
    showData(jsondata) {
      this.$Modal.alert({ content: jsondata });
    },
    downloadImpByChart() {
      this.common.saveChart(this.$echarts.getInstanceByDom(document.getElementById('myChart231')), this.title)
    }
  }
};
</script>
<style scoped>
.about {
  padding-top: 2rem;
}
#myChart231 {
  margin: 0 auto;
}
</style>